<template>
	<view class=" u-p-30" :style="{paddingTop:`${$safeh}px `}">
		<u-navbar :border='true' :placeholder='true' title="个人中心">
			<view class="u-nav-slot" slot="left">
				<u-icon name="scan" @click="scan" size="19"></u-icon>
			</view>
		</u-navbar>
		<view class="u-m-t-30" v-for="i in orderlist">
			<view class="flex orderbox u-font-28">
				<u-icon size=20 name='map'></u-icon>
				<view class="u-m-l-10">
					<view class="">
						{{i.address_info.name}}
					</view>
					<view class="" style="color: #999;">
						订单编号：{{i.order_no}}
					</view>
					<view class="" style="color: #999;">
						订单位置：{{i.address_info.address}}
					</view>
				</view>
			</view>
			<view class="" @click="callphone(i.address_info.phone)" style="margin-top: 30rpx; border-radius: 40rpx;">
				<u-button icon='phone' type="primary" text="拨打客户电话"></u-button>
			</view>
			<view class="" v-if="i.pay_status !== 20  " @click="todetail(i.order_id)" style="margin-top: 30rpx; border-radius: 40rpx;">
				<u-button type="error" style="margin-top: 30rpx;border-radius: 40rpx;" text="等待付款"></u-button>
			</view>
			<view class="" v-if="i.pay_status == 20  " @click="todetail(i.order_id)" style="margin-top: 30rpx; border-radius: 40rpx;">
				<u-button type="success" style="margin-top: 30rpx;border-radius: 40rpx;" text="查看订单"></u-button>
			</view>
			<view class="dashed-line u-m-t-30"></view>
		</view>


		<view class="" v-if="orderlist.length==0">
			<view class="flex-center u-m-tb-30">
				你嗨没有绑定订单呢T.T
			</view>
			<view class="flex-center u-m-tb-30 u-font-28" style="color: #999;">
				这里只显示配送中的订单
			</view>
			<u-empty></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderlist:[]
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			callphone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			init(){
				this.$api.get('/order/my_order',{size:100}).then(res=>{
					this.orderlist = res.data
				})
			},
			scan() {
				var that = this
				uni.scanCode({
					success: function(res) {
						that.$api.post('/order/scan_qr',{qr_code:res.result}).then(res=>{
							that.$toast('绑定成功')
							that.init()
						})
					}
				});
			},
			todetail(order_id) {
				uni.navigateTo({
					url: '/pages/detail/detail?order_id=' + order_id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderbox {
		align-items: flex-start;
	}

	.custom-style {
		background-color: #6D98F7;
	}

	.custom-styles {
		background-color: #EA4330;
	}
</style>